:root{font-family:system-ui,'Noto Sans JP',sans-serif;color:#f4f5ff;background:#0d1223}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#263353,#0d1223 70%);min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:16px max(16px,calc((100vw - 950px)/2));background:#10182ccc;border-bottom:1px solid #394668}h1{font-size:22px;margin:2px 0}small,.muted{color:#aebad4}.coins{font-size:20px;background:#263250;padding:10px;border-radius:16px}nav{display:flex;gap:5px;justify-content:center;position:sticky;top:0;background:#101729f2;padding:9px;z-index:5}button{font:inherit;cursor:pointer;border:1px solid #53658c;color:#f4f5ff;background:#293655;border-radius:12px;padding:12px 15px}button:hover,button.on{background:#5067a0}button:disabled{opacity:.45;cursor:not-allowed}nav button{padding:9px 12px;font-size:13px}main{max-width:940px;margin:auto;padding:20px 15px 70px}.panel{background:#18243c;border:1px solid #39486d;border-radius:19px;padding:20px;margin:14px 0;box-shadow:0 8px 30px #0002}.hero{background:linear-gradient(135deg,#324b84,#1b2850)}h2{font-size:22px;margin:0 0 13px}h3{margin:12px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}.stat{background:#263655;border-radius:13px;padding:15px}.stat b{font-size:26px;color:#ffe49c}.primary{background:linear-gradient(120deg,#f6bc4c,#f17b45);color:#231c17;border:0;font-weight:800}.wide{width:100%;margin:5px 0}.options{display:grid;gap:11px;margin:17px 0}.options button{text-align:left;line-height:1.6;min-height:58px;background:#263758}.options button.correct{background:#236e55;border-color:#69e6a7}.options button.wrong{background:#793c4b;border-color:#ed8394}.tag{font-size:12px;background:#33456a;border-radius:12px;padding:5px 9px;display:inline-block;margin:3px}.progress{height:9px;background:#0e172a;border-radius:20px;overflow:hidden}.progress div{height:100%;background:#f6bc4c}.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px}.char{border:1px solid #516087;background:#263453;border-radius:15px;overflow:hidden;text-align:center;padding-bottom:9px}.char img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.char strong{display:block;font-size:12px;padding:6px 3px}.char.lock{filter:grayscale(1);opacity:.6}.char .num{font-size:11px;color:#c4cee3}.bigchar{width:min(280px,85%);border-radius:18px;border:3px solid #ffce6d;display:block;margin:15px auto}.notice{background:#253c55;border-left:4px solid #e4b75c;padding:13px;border-radius:7px;line-height:1.7}.sub{font-size:13px;color:#bdc8e2;line-height:1.7}select{background:#293655;color:white;padding:10px;border:1px solid #53658c;border-radius:10px;max-width:100%} .unit{margin:7px 5px 7px 0}.ok{color:#84e9ac}.bad{color:#ff9ca6}footer{text-align:center;color:#8594b4;font-size:11px;padding:20px} @media(max-width:420px){nav button{padding:9px 7px;font-size:12px}.panel{padding:15px}.cardgrid{grid-template-columns:repeat(3,1fr)}}

/* 完全なカード表示: 画像を切らず、上下の情報を分離 */
.cardgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.char{padding:7px 7px 12px;border:2px solid #b88c52;border-radius:17px;background:linear-gradient(145deg,#3d345c,#192640);box-shadow:0 6px 16px #0005;overflow:hidden;position:relative}
.char .cardart{aspect-ratio:3/4;background:radial-gradient(#506388,#151e32);border-radius:11px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.char .cardart img{width:100%;height:100%;object-fit:contain;aspect-ratio:auto;display:block}
.char strong{font-size:14px;min-height:40px;display:flex;align-items:center;justify-content:center;color:#fff3ce}
.char .num{display:block;margin-top:7px;color:#e8c681}
.char.unowned .cardart img{filter:grayscale(1) brightness(.38)}
.char.unowned{opacity:1;filter:none}
.char.owned{border-color:#f6c66d}
.collectstatus{display:block;color:#d8d1e9;font-size:12px}
.summonbtn{padding:8px 4px;font-size:12px;width:100%;background:linear-gradient(135deg,#7154ab,#3d548c);margin-top:5px}
.summonbtn:disabled{background:#313950}
.modalback{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:30;padding:14px}
.modalpanel{max-width:430px;width:100%;max-height:94vh;overflow:auto;background:#1b2640;border:2px solid #e3bb6e;border-radius:19px;text-align:center;padding:15px}
.modalpanel img{display:block;max-width:100%;max-height:64vh;object-fit:contain;margin:14px auto;border-radius:10px}
@media(max-width:420px){.cardgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.char{padding:5px}.char strong{font-size:12px}}

/* v6: display optimized art panels without clipping character details */
.char .cardart{aspect-ratio:2/3}
.char .cardart img{object-fit:contain;width:100%;height:100%}

/* v7: keep complete wide dragon artwork visible, without shrinking inside tall frame */
.char .cardart.dragonwide{aspect-ratio:1/1}
header{padding:14px 14px 8px}header h1{font-size:20px;margin:0 0 5px}header small{font-size:12px}nav{display:flex;gap:4px;overflow-x:auto;justify-content:flex-start;padding:10px 8px;position:sticky;top:0;z-index:10;background:#111b32}nav button{padding:9px 10px;white-space:nowrap;font-size:13px}main{max-width:860px;margin:auto;padding:10px 12px 60px}.tilegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.tilegrid button{min-height:88px;font-size:16px;line-height:1.7;padding:10px}.tilegrid small{font-size:12px}.areahead{display:flex;justify-content:space-between;gap:8px;align-items:center;border-bottom:1px solid #566282;padding:8px 0}.areahead h3{font-size:16px}.areahead button{font-size:13px}.question{white-space:pre-line;line-height:1.65}.cardgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.char{min-width:0;padding:8px;text-align:center}.char img{display:block;width:100%;height:230px;object-fit:contain;background:#1c2845;border-radius:10px}.char p{font-size:13px;margin:6px 0}.char strong{display:block;min-height:25px}.char.unowned img{filter:grayscale(1) brightness(.5)}.notice{margin:10px 0;padding:12px;background:#253450;border-radius:10px}.options button{white-space:normal;text-align:left}.panel{overflow:hidden}button:disabled{opacity:.45}#wallet{font-size:15px}

.hiddenart{display:flex;align-items:center;justify-content:center;width:100%;height:230px;border-radius:10px;background:linear-gradient(145deg,#26334e,#111a2c);color:#9eabc3;font-size:72px;font-weight:800;border:1px solid #44516b;box-sizing:border-box}.char.unowned{opacity:1}.char.unowned strong{color:#e7d7ad}