/* RyuGames - Win98-style arcade (teal desktop, bevelled grey panels).  Mirrors the legacy Tailwind look. */
body.games-page { background:#008080; min-height:100vh; }
#games-root { padding:8px; font-size:14px; }
@media (min-width:576px){ #games-root { padding:16px; } }
.g-bevel { border-top:2px solid #fff; border-left:2px solid #fff; border-right:2px solid #808080; border-bottom:2px solid #808080; box-shadow:1px 1px 0 0 #000; }
.g-panel { background:#ece9d8; padding:12px; margin:0 auto 16px; max-width:72rem; }
.g-app { display:flex; flex-direction:column; align-items:center; }
.g-app > * { width:100%; }
.g-head { display:flex; flex-direction:column; gap:12px; justify-content:space-between; align-items:center; }
@media (min-width:768px){ .g-head { flex-direction:row; } }
.g-dog { width:48px; height:48px; border-radius:50%; background:#fbbf24; border:2px solid #000; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.g-ver { background:#0a246a; color:#fff; font-size:12px; padding:0 8px; border-radius:4px; font-family:monospace; }
.g-xp { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid #9ca3af; padding:8px 16px; border-radius:4px; box-shadow:inset 0 1px 3px rgba(0,0,0,.2); width:100%; justify-content:space-between; }
@media (min-width:768px){ .g-xp { width:auto; } }
.g-xpbar { width:128px; background:#e5e7eb; height:12px; border-radius:9px; overflow:hidden; border:1px solid #9ca3af; }
.g-xpbar div { background:#22c55e; height:100%; width:75%; animation:g-pulse 2s infinite; }
@keyframes g-pulse { 50% { opacity:.5; } }
.g-tabs { display:flex; gap:4px; margin:0 auto 8px; max-width:72rem; overflow-x:auto; scrollbar-width:none; }
.g-tabs::-webkit-scrollbar { display:none; }
.g-tab { padding:8px 16px; font-weight:bold; font-size:12px; white-space:nowrap; border-radius:4px 4px 0 0; border:2px solid #fff; border-bottom:0; background:#0a246a; color:#fff; }
.g-tab:hover { background:#1e40af; }
.g-tab.active { background:#ece9d8; color:#000; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.g-back { display:inline-block; padding:6px 14px; background:#e5e7eb; border:1px solid #9ca3af; color:#1f2937; font-weight:bold; font-size:12px; text-decoration:none; border-radius:4px; }
.g-back:hover { background:#d1d5db; color:#111; }
.g-stagebox { background:#ece9d8; padding:16px; margin:0 auto; max-width:72rem; display:flex; flex-direction:column; gap:16px; }
.g-stagebox.w4 { max-width:56rem; }
.g-gamebar { background:#0a246a; color:#fff; padding:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:2px solid #fff; font-weight:bold; font-size:14px; }
.g-red { background:#dc2626; color:#fff; font-size:12px; padding:1px 8px; border-radius:4px; font-weight:bold; border:0; }
.g-red:hover { background:#b91c1c; }
.g-card { background:#fff; border:1px solid #9ca3af; border-radius:8px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.g-stat { background:#fff; border:1px solid #9ca3af; border-radius:4px; padding:12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:12px; font-weight:bold; box-shadow:inset 0 1px 3px rgba(0,0,0,.15); }
.g-stat b.big { font-size:16px; }
.g-center { text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.g-btn { padding:8px 16px; font-weight:bold; font-size:12px; border-radius:6px; border:1px solid transparent; color:#fff; }
.g-btn:active { transform:scale(.96); }
.g-btn.green { background:#059669; } .g-btn.green:hover { background:#047857; }
.g-btn.blue { background:#1e40af; } .g-btn.blue:hover { background:#1e3a8a; }
.g-btn.big { padding:12px 32px; font-size:16px; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,.25); }
.g-btn:disabled { background:#d1d5db; color:#6b7280; cursor:not-allowed; transform:none; }
.g-opt { padding:12px; background:#fffbeb; border:2px solid #fcd34d; border-radius:4px; font-weight:bold; font-size:12px; color:#1f2937; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.g-opt:hover { background:#fde68a; }
.g-opt:active { transform:scale(.96); }
.g-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:28rem; }
.g-jp { font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP","Noto Sans CJK JP",Meiryo,sans-serif; }
.g-pill { padding:6px 12px; font-size:12px; font-weight:bold; border-radius:4px; border:0; background:#f3f4f6; color:#374151; flex-shrink:0; }
.g-pill:hover { background:#e5e7eb; } .g-pill.active { background:#f59e0b; color:#000; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.g-cat { padding:4px 12px; font-size:12px; font-weight:bold; border-radius:999px; border:0; background:#e5e7eb; color:#1f2937; white-space:nowrap; }
.g-cat:hover { background:#d1d5db; } .g-cat.active { background:#1e40af; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.g-game { background:#fff; border:2px solid #d1d5db; border-radius:8px; padding:12px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:all .15s; }
.g-game:hover { border-color:#2563eb; box-shadow:0 8px 20px rgba(0,0,0,.25); }
.g-game .ic { font-size:30px; background:#fef3c7; padding:10px; border-radius:8px; border:1px solid #fcd34d; transition:transform .15s; }
.g-game:hover .ic { transform:scale(1.1); }
.g-badge { font-size:10px; font-weight:bold; text-transform:uppercase; padding:2px 8px; border-radius:4px; color:#fff; }
.g-jl { font-size:10px; font-weight:bold; background:#fef3c7; color:#92400e; padding:2px 8px; border-radius:4px; border:1px solid #fcd34d; }
.g-clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* check-in */
.g-checkin { max-width:48rem; margin:0 auto; background:#ece9d8; box-shadow:0 10px 30px rgba(0,0,0,.4); border:2px solid #fff; }
.g-checkin-bar { background:#0a246a; color:#fff; padding:8px 16px; display:flex; justify-content:space-between; align-items:center; }
.g-x { color:#fff; border:1px solid rgba(255,255,255,.5); padding:0 8px; font-size:12px; border-radius:4px; text-decoration:none; }
.g-box { border-radius:8px; padding:20px; border:2px solid; } .g-box h2 { font-size:16px; font-weight:bold; margin:0; }
.g-box.amber { background:#fffbeb; border-color:#fcd34d; color:#451a03; } .g-box.blue { background:#eff6ff; border-color:#93c5fd; color:#172554; }
.g-lvl { padding:8px 16px; font-size:12px; font-weight:bold; border-radius:4px; border:0; background:#f3f4f6; color:#374151; }
.g-lvl:hover { background:#e5e7eb; } .g-lvl.active { background:#b91c1c; color:#fff; }
/* restaurant */
.g-order { background:#fef3c7; border:2px solid #fbbf24; border-radius:12px; padding:16px; display:flex; align-items:center; gap:16px; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.g-order .face { font-size:48px; background:#fff; padding:8px; border-radius:50%; border:2px solid #fbbf24; line-height:1; }
.g-order .phrase { font-size:24px; font-weight:800; color:#172554; background:#fff; padding:8px 16px; border-radius:8px; border:1px solid #fcd34d; display:inline-block; }
.g-feedback { background:#1e3a8a; color:#fff; padding:10px; text-align:center; font-weight:bold; font-size:12px; border-radius:4px; box-shadow:0 2px 5px rgba(0,0,0,.3); }
.g-menu { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; max-height:192px; overflow-y:auto; padding:4px; scrollbar-width:none; }
.g-menu button { padding:8px; font-size:12px; border-radius:4px; border:1px solid #e5e7eb; background:#f9fafb; color:#1f2937; display:flex; flex-direction:column; align-items:center; gap:2px; }
.g-menu button:hover { background:#fffbeb; }
.g-menu button.sel { background:#2563eb; color:#fff; border-color:#1e3a8a; font-weight:bold; transform:scale(.95); box-shadow:0 1px 3px rgba(0,0,0,.4); }
.g-qty { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.g-qty button { padding:10px; font-size:12px; border-radius:4px; border:1px solid #e5e7eb; background:#f9fafb; color:#1f2937; display:flex; justify-content:space-between; align-items:center; }
.g-qty button:hover { background:#fffbeb; } .g-qty button.sel { background:#f59e0b; color:#fff; border-color:#b45309; font-weight:bold; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.g-diff { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.g-diff button { padding:6px 12px; font-size:12px; font-weight:bold; border-radius:4px; border:1px solid #d1d5db; background:#fff; color:#1f2937; }
.g-diff button.active { background:#1e40af; color:#fff; border-color:#1e3a8a; }
/* memory */
.g-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (min-width:576px){ .g-cards { grid-template-columns:repeat(4,1fr); } }
.g-cardbtn { height:96px; border-radius:8px; font-weight:bold; font-size:16px; padding:8px; border:2px solid #172554; background:#1e3a8a; color:#fff; font-size:24px; box-shadow:0 2px 5px rgba(0,0,0,.3); transition:all .15s; }
.g-cardbtn:hover { background:#1e40af; }
.g-cardbtn.open { background:#fef3c7; border-color:#fbbf24; color:#172554; font-size:16px; transform:scale(.95); }
/* boss */
.g-hp { width:100%; background:#e5e7eb; height:20px; border-radius:99px; overflow:hidden; border:1px solid #9ca3af; }
.g-hp div { background:#dc2626; height:100%; transition:width .5s; }
.g-battle { background:#fffbeb; border:2px solid #fbbf24; padding:24px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,.2); display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.g-kanji { font-size:48px; font-weight:900; color:#172554; background:#fff; padding:12px 24px; border-radius:4px; border:1px solid #fcd34d; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.g-log { background:#000; color:#4ade80; font-family:monospace; padding:12px; border-radius:4px; font-size:12px; max-height:144px; overflow-y:auto; }
/* sentence */
.g-target { width:100%; max-width:42rem; background:linear-gradient(to right,#fffbeb,#fff7ed); border:2px solid #fcd34d; border-radius:12px; padding:16px; }
.g-slots { width:100%; min-height:90px; background:#f8fafc; border:2px dashed #60a5fa; border-radius:12px; padding:12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:center; box-shadow:inset 0 1px 4px rgba(0,0,0,.15); }
.g-word { padding:8px 10px; background:linear-gradient(#2563eb,#1d4ed8); color:#fff; font-weight:800; font-size:14px; border-radius:8px; display:flex; align-items:center; gap:6px; cursor:grab; user-select:none; border:2px solid #1e40af; box-shadow:0 2px 5px rgba(0,0,0,.3); }
.g-word.over { border-color:#fbbf24; transform:scale(1.05); box-shadow:0 0 0 3px #fcd34d; }
.g-word .mini { width:16px; height:16px; border-radius:4px; background:rgba(30,58,138,.6); color:#fff; border:0; font-size:9px; font-weight:bold; padding:0; line-height:16px; }
.g-word .mini:hover { background:#f59e0b; color:#000; } .g-word .rm { border-radius:50%; background:rgba(239,68,68,.8); font-size:10px; } .g-word .rm:hover { background:#dc2626; color:#fff; }
.g-avail { width:100%; max-width:42rem; background:rgba(255,251,235,.7); border:1px solid #fde68a; border-radius:12px; padding:12px; }
.g-avail button { padding:8px 16px; background:#fff; border:2px solid #fbbf24; color:#111827; font-weight:bold; font-size:14px; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.g-avail button:hover { background:#fef3c7; } .g-avail button:active { transform:scale(.95); }
.g-ok { background:#d1fae5; border:2px solid #10b981; color:#064e3b; } .g-bad { background:#ffe4e6; border:2px solid #fb7185; color:#881337; }
.g-ok,.g-bad { width:100%; max-width:42rem; padding:12px; border-radius:8px; font-weight:bold; font-size:12px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.g-bounce { animation:g-bounce 1s infinite; } @keyframes g-bounce { 0%,100%{transform:translateY(-8%)} 50%{transform:none} }
.g-rankli { display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid #d1d5db; border-radius:4px; padding:8px 12px; font-size:12px; }
/* speed quiz 3D */
.sq { position:relative; min-height:600px; width:100%; background:#0a0e17; color:#fff; display:flex; flex-direction:column; overflow:hidden; user-select:none; border-radius:16px; border:2px solid rgba(16,185,129,.4); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.sq-canvas { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.sq-canvas canvas { width:100% !important; height:100% !important; display:block; }
.sq-top { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:rgba(15,23,42,.8); backdrop-filter:blur(8px); border-bottom:1px solid #1e293b; gap:8px; }
.sq-btn { padding:8px 12px; border-radius:8px; background:#1e293b; border:0; color:#cbd5e1; font-weight:bold; font-size:12px; }
.sq-btn:hover { background:#334155; }
.sq-title { font-size:14px; font-weight:900; letter-spacing:.05em; background:linear-gradient(to right,#34d399,#99f6e4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sq-main { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; min-height:500px; }
.sq-card { background:rgba(15,23,42,.92); border:1px solid #1e293b; border-radius:24px; padding:24px; box-shadow:0 20px 40px rgba(0,0,0,.5); backdrop-filter:blur(8px); width:100%; }
.sq-card.menu { max-width:36rem; border-color:rgba(16,185,129,.3); text-align:center; display:flex; flex-direction:column; gap:20px; }
.sq-lvls { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
@media (max-width:575px){ .sq-lvls { grid-template-columns:1fr; } }
.sq-lvl { padding:14px; border-radius:16px; background:rgba(30,41,59,.9); border:2px solid #334155; color:#fff; display:flex; flex-direction:column; align-items:center; gap:4px; transition:all .15s; }
.sq-lvl:hover { border-color:#10b981; transform:scale(1.05); } .sq-lvl b { font-size:18px; font-weight:900; color:#34d399; }
.sq-hud { max-width:42rem; width:100%; display:flex; flex-direction:column; gap:16px; }
.sq-stats { display:flex; justify-content:space-between; align-items:center; background:rgba(15,23,42,.92); border:1px solid #1e293b; padding:16px; border-radius:16px; flex-wrap:wrap; gap:8px; }
.sq-timer { width:100%; background:#1e293b; border-radius:99px; height:12px; overflow:hidden; padding:2px; border:1px solid #334155; }
.sq-timer div { height:100%; border-radius:99px; background:#34d399; transition:width .1s linear; } .sq-timer div.warn { background:#fbbf24; } .sq-timer div.danger { background:#f43f5e; animation:g-pulse 1s infinite; }
.sq-q { border:2px solid #1e293b; transition:all .2s; display:flex; flex-direction:column; gap:20px; }
.sq-q.wrong { border-color:rgba(244,63,94,.8); background:rgba(76,5,25,.5); animation:sq-shake .4s; } .sq-q.crit { border-color:#fbbf24; background:rgba(69,26,3,.3); } .sq-q.fever { border-color:rgba(245,158,11,.5); }
@keyframes sq-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.sq-opts { display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:575px){ .sq-opts { grid-template-columns:1fr; } }
.sq-opt { padding:16px; border-radius:16px; border:2px solid #334155; background:rgba(30,41,59,.9); color:#fff; font-weight:bold; font-size:15px; text-align:left; display:flex; justify-content:space-between; align-items:center; box-shadow:0 2px 5px rgba(0,0,0,.3); }
.sq-opt:hover:not(:disabled) { border-color:rgba(16,185,129,.6); } .sq-opt:disabled { cursor:default; }
.sq-opt.right { background:#059669; border-color:#34d399; font-weight:900; transform:scale(1.02); } .sq-opt.miss { background:#e11d48; border-color:#fb7185; font-weight:900; transform:scale(.98); } .sq-opt.dim { background:rgba(30,41,59,.4); border-color:#1e293b; color:#64748b; opacity:.5; }
.sq-opt small { font-family:monospace; opacity:.6; }
.sq-crit { padding:6px 16px; border-radius:99px; background:linear-gradient(to right,#fbbf24,#f43f5e,#9333ea); color:#fff; font-weight:900; font-size:14px; letter-spacing:.1em; display:inline-block; box-shadow:0 4px 12px rgba(0,0,0,.4); }
.sq-fever { padding:2px 10px; border-radius:99px; background:linear-gradient(to right,#f59e0b,#f43f5e); color:#fff; font-weight:900; font-size:10px; animation:g-bounce 1s infinite; }
.sq-go { width:100%; padding:12px; border-radius:16px; border:0; font-weight:900; font-size:14px; }