*{box-sizing:border-box}
:root{
  --ink:#0b0b0b;
  --paper:#fff;
  --red:#ff1717;
  --red2:#ff4b4b;
  --wood:#e9c765;
  --wood-dark:#a87921;
  --green:#1fa463;
  --yellow:#ffd83d;
}
html,body{margin:0;min-height:100%;background:#090909;color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans JP","Yu Gothic",sans-serif}
body{display:flex;justify-content:center}
button{font:inherit;cursor:pointer}
.layout{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;gap:28px;padding:20px}
.phone{
  --bottom-ad-height:50px;
  width:min(56vh, calc(100vw - 48px), 540px);
  aspect-ratio:9/16;
  min-height:0;
  background:#fff;
  position:relative;
  overflow:hidden;
  border:1px solid #ddd;
  box-shadow:0 14px 60px rgba(0,0,0,.55);
}
.screen{position:absolute;inset:0 0 var(--bottom-ad-height);background:#fff}
.bottom-ad{
  position:absolute;z-index:60;inset:auto 0 0;height:var(--bottom-ad-height);
  display:flex;align-items:center;justify-content:center;gap:10px;padding:5px 10px;
  border-top:1px solid var(--cyan,#27e7ff);background:#030713;color:#86cbd8
}
.bottom-ad-label{flex:none;padding:2px 5px;border:1px solid #365b70;font:700 9px/1 monospace;letter-spacing:.12em}
.bottom-ad-slot{width:min(320px,88%);height:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px dashed #315d75;background:#071225;font:700 clamp(9px,2vw,12px)/1 monospace;letter-spacing:.08em}
.bottom-ad-slot strong{color:#8fbec9}.bottom-ad-slot small{color:#527f90;font-size:9px;white-space:nowrap}
.hidden{display:none!important}

/* Home */
.home-screen{display:flex;flex-direction:column;background:#ffce00;isolation:isolate}
.sunburst{position:absolute;inset:-25%;z-index:-2;background:repeating-conic-gradient(from -8deg at 50% 42%,#ffd92e 0 9deg,#ffc400 9deg 18deg)}
.home-screen:after{content:"";position:absolute;inset:auto -10% -6%;height:27%;z-index:-1;background:#fff;clip-path:polygon(0 25%,100% 0,100% 100%,0 100%)}
.home-topline{display:flex;justify-content:center;align-items:center;gap:2.5%;padding:3.2% 4% 0;font-size:clamp(11px,2.4vw,17px);font-weight:900;letter-spacing:.12em}
.home-topline strong{background:#111;color:#fff;padding:1.3% 3.2%;transform:rotate(1deg);box-shadow:3px 3px 0 #ff3b30}
.brand{position:relative;text-align:center;padding:2% 4% 0;font-weight:950;line-height:.82;letter-spacing:-.08em;filter:drop-shadow(0 5px 0 #fff) drop-shadow(0 8px 0 #111)}
.brand-dopa,.brand-tsume{display:inline-block;font-family:"Arial Black","Noto Sans JP",sans-serif;font-size:clamp(64px,14vw,108px);-webkit-text-stroke:4px #111}
.brand-dopa{color:#ff342b;transform:rotate(-3deg)}.brand-tsume{color:#fff;transform:rotate(2deg)}
.brand small{display:block;width:max-content;margin:4% auto 0;padding:.8% 4%;background:#111;color:#fff;font-size:clamp(12px,2.8vw,19px);line-height:1.25;letter-spacing:.16em;filter:none;transform:rotate(-1deg)}
.home-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2% 8% 5%}
.mascot-stage{position:relative;width:100%;height:48%;display:grid;place-items:center}
.mascot-burst{position:absolute;width:71%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 8px #111,0 12px 0 rgba(0,0,0,.16)}
.mascot{position:relative;width:67%;max-width:320px;image-rendering:auto;transform:translateY(5%)}
.impact{position:absolute;z-index:2;padding:1.5% 3%;border:3px solid #111;background:#fff;font-size:clamp(15px,3.5vw,24px);font-weight:950;box-shadow:4px 4px 0 #111}
.impact-one{left:0;top:12%;transform:rotate(-8deg);color:#ff342b}.impact-two{right:1%;bottom:10%;transform:rotate(7deg);background:#111;color:#ffde25}
.tagline{font-size:clamp(15px,3.4vw,24px);font-weight:900;margin:1% 0 4%;letter-spacing:.03em;transform:rotate(-1deg)}
.tagline strong{color:#ff342b;font-size:1.35em;-webkit-text-stroke:1px #111}
.primary-btn{
  width:82%;min-height:62px;border:4px solid var(--ink);background:#ff342b;color:#fff;
  font-size:clamp(24px,5vw,38px);font-weight:900;letter-spacing:.08em;
  box-shadow:8px 8px 0 var(--ink);transition:.12s transform,.12s box-shadow
}
.primary-btn span{font-size:.72em}.micro-copy{margin:4% 0 0;font-weight:800;font-size:clamp(11px,2.3vw,16px);letter-spacing:.12em}
.primary-btn:active{transform:translate(5px,5px);box-shadow:2px 2px 0 var(--ink)}
.sound-toggle{margin-top:3%;padding:1.6% 5%;border:1px solid var(--cyan,#27e7ff);background:#07152d;color:#d8ff35;font-weight:900;letter-spacing:.08em;box-shadow:3px 3px 0 #281052}
.sound-toggle.off{color:#7c9ca6;border-color:#47606e;box-shadow:none}

/* Play */
.play-screen{padding:4% 6% 5%;display:flex;flex-direction:column}
.combo-effect{position:absolute;inset:0;z-index:20;display:grid;place-items:center;pointer-events:none;visibility:hidden;overflow:hidden;background:rgba(5,8,18,0)}
.combo-effect.active{visibility:visible;animation:electric-flash .7s ease-out both}
.combo-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;transform:scale(.4) rotate(-4deg);opacity:0}
.combo-effect.active .combo-copy{animation:combo-pop .7s cubic-bezier(.16,1.25,.3,1) both}
.combo-copy strong{padding:3% 6%;white-space:nowrap;background:#fff;color:#111;border:5px solid #111;font-size:clamp(28px,7vw,52px);font-weight:950;letter-spacing:-.04em;box-shadow:8px 8px 0 #22b8ff,-6px -6px 0 #ffe329}
.combo-copy span{padding:2% 5%;background:#ff342b;color:#fff;border:3px solid #111;font-size:clamp(16px,3.5vw,25px);font-weight:950;box-shadow:5px 5px 0 #111}
.lightning{position:absolute;left:50%;top:50%;width:8px;height:105%;background:#fff;box-shadow:0 0 7px 3px #fff,0 0 19px 8px #18a8ff;clip-path:polygon(35% 0,100% 0,58% 42%,100% 40%,18% 100%,41% 55%,0 58%);opacity:0}
.combo-effect.active .lightning{animation:bolt .55s ease-out both}.lightning-a{transform:translate(-50%,-50%) rotate(24deg)}.lightning-b{transform:translate(-50%,-50%) rotate(145deg);animation-delay:.06s!important}.lightning-c{transform:translate(-50%,-50%) rotate(268deg);animation-delay:.1s!important}
@keyframes electric-flash{0%{background:rgba(5,8,18,0)}12%{background:rgba(19,97,170,.28)}30%{background:rgba(5,8,18,.08)}100%{background:rgba(5,8,18,0)}}
@keyframes bolt{0%{opacity:0;scale:.45}12%{opacity:1}45%{opacity:.85}100%{opacity:0;scale:1.15}}
@keyframes combo-pop{0%{opacity:0;transform:scale(.35) rotate(-8deg)}24%{opacity:1;transform:scale(1.12) rotate(2deg)}50%{transform:scale(1) rotate(-1deg)}82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
.timer-wrap{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0;margin-bottom:3%;padding:2.3% 3% 4.5%;overflow:hidden;background:linear-gradient(145deg,#172236,#05070d 62%);border:3px solid #263b58;clip-path:polygon(2% 0,98% 0,100% 18%,100% 82%,98% 100%,2% 100%,0 82%,0 18%);box-shadow:inset 0 0 0 1px #5ed9ff,inset 0 0 18px rgba(33,179,255,.35),0 5px 0 #030407;color:#d9f7ff}
.timer-wrap:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(83,212,255,.045) 4px 5px);pointer-events:none}
.timer-heading{display:flex;align-items:center;gap:7%;font:900 clamp(13px,3vw,20px)/1 "Arial Narrow",sans-serif;letter-spacing:.16em;text-shadow:0 0 8px #23caff}.timer-icon{display:grid;place-items:center;width:28px;aspect-ratio:1;border:2px solid #38d4ff;color:#55e4ff;transform:skew(-10deg);animation:digital-blink 1s steps(2) infinite}
.timer-readout{display:flex;align-items:flex-end;gap:5px}.timer-readout small{padding-bottom:8%;font:bold clamp(8px,1.8vw,12px)/1 monospace;color:#5fdcff;letter-spacing:.1em}
.timer{min-width:3.1em;text-align:right;font-family:"Arial Black","Courier New",monospace;font-size:clamp(36px,7.7vw,58px);font-weight:950;font-style:italic;line-height:.9;letter-spacing:-.08em;font-variant-numeric:tabular-nums;color:#eaffff;text-shadow:0 0 4px #fff,0 0 11px #25cfff,3px 3px 0 #073e62}
.timer-track{position:absolute;left:3%;right:3%;bottom:6%;height:7%;overflow:hidden;background:#020308;border:1px solid #31536b;transform:skew(-12deg)}
.timer-gauge{height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,#16a9ff,#63f4ff 70%,#fff);box-shadow:0 0 10px #21cfff;transition:width .08s linear,background .2s}
.timer-scan{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);width:22%;animation:gauge-scan 1.3s linear infinite}
.timer-wrap.warning{border-color:#ffb51b;animation:panel-warning .55s ease-in-out infinite alternate}.timer-wrap.warning .timer,.timer-wrap.warning .timer-heading{color:#fff3a8;text-shadow:0 0 5px #fff,0 0 13px #ff9d00}.timer-wrap.warning .timer-gauge{background:linear-gradient(90deg,#ff7817,#ffe927)}
.timer-wrap.danger{border-color:#ff3030;animation:panel-danger .25s ease-in-out infinite alternate}.timer-wrap.danger .timer{color:#fff;text-shadow:0 0 4px #fff,0 0 15px #ff1717}.timer-wrap.danger .timer-gauge{background:#ff2525;box-shadow:0 0 13px #ff1717}
@keyframes gauge-scan{from{transform:translateX(-110%)}to{transform:translateX(520%)}}@keyframes digital-blink{50%{opacity:.35}}@keyframes panel-warning{to{transform:translateY(-1px);filter:brightness(1.12)}}@keyframes panel-danger{to{transform:translateX(2px);filter:brightness(1.25)}}
.timer.bonus{animation:timer-bonus .48s ease-out}
@keyframes timer-bonus{0%{transform:scale(1);color:#0b0b0b}35%{transform:scale(1.28);color:#159b58;text-shadow:0 0 12px #6cffb3}100%{transform:scale(1)}}
.dan-cutin{position:absolute;z-index:32;top:8%;left:0;width:max-content;max-width:none;padding:7px 24px;background:linear-gradient(90deg,#d8ff35,#27e7ff);border:2px solid #fff;color:#06101f;font-size:clamp(22px,5.4vw,38px);font-weight:950;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:0 0 18px #27e7ff,6px 6px 0 #ff2bd6;transform:translateX(110vw) skewX(-9deg)}
.dan-cutin.active{animation:dan-cutin-run 1.1s cubic-bezier(.2,.75,.2,1) both}
@keyframes dan-cutin-run{0%{opacity:0;transform:translateX(110vw) skewX(-9deg)}12%{opacity:1}48%{opacity:1;transform:translateX(8vw) skewX(-9deg)}80%{opacity:1}100%{opacity:0;transform:translateX(-125%) skewX(-9deg)}}
.problem-meta{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:clamp(12px,2.7vw,18px);padding:0 2% 2%}
.problem-meta #difficulty{background:#111;color:#fff;border-radius:999px;padding:4px 10px}

.board-wrap{width:96%;max-width:430px;margin:auto;display:flex;flex-direction:column;align-items:stretch;gap:2.2%}
.board{
  /* Traditional shogi squares are about 1:1.1 (width:height). */
  width:100%;aspect-ratio:10/11;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);
  border:3px solid #5d451c;background:var(--wood);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.2),0 7px 18px rgba(0,0,0,.15)
}
.piece-stand{position:relative;width:100%;min-height:58px;display:grid;grid-template-columns:25% 1fr;align-items:stretch;border:3px solid #5d451c;background:var(--wood);box-shadow:0 5px 12px rgba(0,0,0,.17)}
.piece-stand-label{display:flex;flex-direction:column;justify-content:center;padding:5% 10%;border-right:2px solid rgba(93,69,28,.72)}
.piece-stand-label span{font:800 clamp(8px,1.8vw,11px)/1 monospace;letter-spacing:.13em}.piece-stand-label strong{font-size:clamp(13px,2.8vw,18px)}
.hand-pieces{
  --hand-piece-width:clamp(28px,7vw,40px);
  --hand-piece-height:clamp(32px,8vw,46px);
  display:flex;align-items:center;gap:clamp(1px,.5vw,3px);padding:1.5% 3%;min-width:0
}
.hand-pieces .piece,.hand-pieces .piece.gote{width:100%;height:100%;object-fit:contain;flex:none;font-size:clamp(17px,3.7vw,27px)}
.hand-piece-button{position:relative;width:var(--hand-piece-width);height:var(--hand-piece-height);flex:0 0 var(--hand-piece-width);border:0;background:transparent;padding:0;cursor:pointer;color:inherit}
.hand-piece-button b{position:absolute;right:-5px;bottom:-2px;padding:1px 4px;border-radius:9px;background:#07152d;color:#fff;font-size:11px;z-index:2}
.hand-piece-button.selected{filter:drop-shadow(0 0 7px #ff2bd6);transform:translateY(-3px)}
.hand-empty{font:800 clamp(9px,2vw,12px)/1 monospace;letter-spacing:.18em;opacity:.44}
.cell{
  position:relative;display:grid;place-items:center;border-right:1px solid rgba(93,69,28,.72);border-bottom:1px solid rgba(93,69,28,.72);
  background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(150,100,10,.04));
  user-select:none;-webkit-tap-highlight-color:transparent
}
.cell:nth-child(9n){border-right:0}.cell:nth-last-child(-n+9){border-bottom:0}
.cell.selected{background:rgba(255,224,62,.75);box-shadow:inset 0 0 0 4px rgba(255,193,0,.9)}
.cell.hint{box-shadow:inset 0 0 0 3px rgba(31,164,99,.85)}
.cell.hint-source,.cell.hint-target,.hand-piece-button.hint-source{
  z-index:4;
  animation:move-hint-pulse .72s ease-in-out infinite alternate
}
.cell.hint-source{box-shadow:inset 0 0 0 3px #70f7ff,inset 0 0 18px rgba(44,224,255,.92),0 0 12px #26dfff}
.cell.hint-target{background:radial-gradient(circle,rgba(216,255,53,.95) 0 24%,rgba(101,255,115,.62) 48%,rgba(20,125,87,.3) 72%);box-shadow:inset 0 0 0 4px #d8ff35,inset 0 0 20px rgba(216,255,53,.92),0 0 14px #d8ff35}
.hand-piece-button.hint-source{filter:drop-shadow(0 0 5px #70f7ff) drop-shadow(0 0 10px #26dfff)}
@keyframes move-hint-pulse{from{opacity:.78}to{opacity:1}}
.piece{
  width:78%;height:82%;display:grid;place-items:center;
  background:#f3e0a4;clip-path:polygon(50% 0,95% 15%,88% 100%,12% 100%,5% 15%);
  color:#16110a;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:900;
  font-size:clamp(18px,4.2vw,32px);line-height:1;
  filter:drop-shadow(1px 2px 1px rgba(0,0,0,.3));transform:translateY(2px)
}
.piece.rotated{transform:rotate(180deg) translateY(-2px)}
.piece.promoted{color:#c32b18}
.feedback{height:8%;display:grid;place-items:center;font-size:clamp(16px,3.8vw,25px);font-weight:950;opacity:0;transform:scale(.85);transition:.16s}
.feedback.show{opacity:1;transform:scale(1)}
.feedback.good{color:var(--green)}.feedback.bad{color:#e23b3b}.feedback.skip{color:#777}
.play-bottom{display:flex;align-items:center;gap:3%;padding-top:2%}
.score-card{flex:1;min-width:0;border:4px solid #111;padding:1% 4% 2%;display:flex;flex-direction:column;background:#111;color:#fff;box-shadow:5px 5px 0 #ffd928;transform:skew(-3deg)}
.score-card span{font:900 clamp(10px,2.2vw,15px)/1 monospace;letter-spacing:.22em;color:#ffda24}
.score-card strong{align-self:flex-end;max-width:100%;font-family:"Arial Black",Impact,sans-serif;font-size:clamp(42px,10vw,74px);font-style:italic;line-height:.85;letter-spacing:-.08em;font-variant-numeric:tabular-nums;text-shadow:3px 3px 0 #ff342b;transform:skew(3deg)}
.dan-rank{align-self:flex-end;margin-top:2%;padding:1% 5%;font-size:clamp(13px,3vw,20px);font-weight:950;line-height:1;color:#111;background:#ffda24;border-left:4px solid #ff342b;letter-spacing:.04em;white-space:nowrap;transform:skew(3deg)}
.skip-btn{border:3px solid #111;background:#fff;font-size:clamp(13px,2.8vw,18px);font-weight:900;padding:3% 4%;white-space:nowrap}

/* Result */
.result-screen{display:flex;flex-direction:column;padding:4% 8% 6%;overflow:hidden;background:radial-gradient(circle at 50% 20%,#fff7aa 0 8%,#ffce18 30%,#ff6b1b 67%,#60121a 100%);isolation:isolate}
.result-rays{position:absolute;inset:-35%;z-index:-1;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.32) 0 5deg,transparent 5deg 13deg);animation:result-spin 22s linear infinite}
.result-crown{text-align:center;height:8%;font-size:clamp(34px,8vw,60px);line-height:1;color:#fff;text-shadow:0 3px 0 #7d2400,0 0 15px #fff;animation:crown-float 1.2s ease-in-out infinite alternate}
.result-title{text-align:center;font-size:clamp(35px,8vw,64px);font-weight:950;line-height:.82;letter-spacing:.04em;color:#fff;-webkit-text-stroke:3px #45100c;text-shadow:0 6px 0 #b82a18,0 10px 15px rgba(0,0,0,.3);margin-bottom:3%}.result-title span{display:block;font-size:.26em;letter-spacing:.42em;-webkit-text-stroke:0;color:#5a170e;text-shadow:none;margin-bottom:3%}
.result-rank{align-self:center;margin:0 0 4%;padding:1.5% 10%;background:#111;color:#ffe12d;border:3px solid #fff;font-size:clamp(18px,4vw,28px);font-weight:950;letter-spacing:.14em;box-shadow:5px 5px 0 #ffef6b;transform:rotate(-2deg)}
.result-stats{display:grid;gap:0;border:4px solid #35110c;background:rgba(255,255,255,.9);box-shadow:7px 7px 0 #35110c}
.result-stats div{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #8c3921;padding:2.8% 4%}.result-stats div:last-child{border-bottom:0}
.result-stats span{font-size:clamp(15px,3.2vw,22px);font-weight:800}
.result-stats strong{font-size:clamp(23px,5vw,35px);font-variant-numeric:tabular-nums}
.result-stats .result-score-row{background:#111;color:#fff}.result-score-row strong{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(40px,9vw,66px);line-height:.9;color:#ffe229;text-shadow:3px 3px 0 #ff342b}
.result-stats .result-dan-row{background:linear-gradient(90deg,#d8ff35,#27e7ff);color:#041019}.result-dan-row strong{font-size:clamp(25px,5.3vw,38px)}
.result-message{text-align:center;display:grid;place-items:center;min-height:12%;padding:3% 2%;font-size:clamp(16px,3.7vw,25px);line-height:1.25;font-weight:950;margin:5% 0 3%;color:#fff;text-shadow:2px 2px 0 #50120b}
.result-actions{width:100%;margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.result-actions .primary-btn{grid-column:1/-1;width:100%;margin:0;padding:2.5% 4%}
.result-action-btn{min-height:38px;border:1px solid var(--cyan,#27e7ff);background:#07152d;color:#c9faff;font-weight:900;box-shadow:3px 3px 0 #281052}
.result-action-btn.x-share-btn{border-color:#fff;background:#050505;color:#fff;box-shadow:3px 3px 0 var(--magenta,#ff2bd6)}
.share-status{min-height:1.2em;margin:-2% 0 2%;text-align:center;color:var(--cyan-soft,#a9f8ff);font:700 clamp(9px,2vw,11px)/1.2 monospace}
@keyframes result-spin{to{transform:rotate(360deg)}}@keyframes crown-float{to{transform:translateY(-5px) scale(1.06)}}

/* Desktop ad */
.ad-column{width:300px;display:flex;flex-direction:column;align-items:center;color:#aaa}
.ad-label{font-size:11px;letter-spacing:.2em;margin-bottom:7px}
.ad-box{
  width:300px;height:250px;border:1px dashed #666;background:#151515;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#777
}
.ad-box span{font-weight:800}.ad-box small{font-size:11px}
.ad-column p{font-size:11px;text-align:center;max-width:260px;line-height:1.6}

@media(max-width:850px){
  .layout{padding:0;display:block}
  .phone{width:min(100vw, calc(100vh * .5625));height:min(100vh, calc(100vw * 1.7777778));box-shadow:none;border:0;margin:0 auto}
  .ad-column{display:none}
}
@media(max-height:650px) and (min-width:851px){
  .layout{padding:10px}.phone{width:360px}.ad-column{transform:scale(.9)}
}

/* Unified cyber theme */
:root{--cyber-bg:#050816;--cyber-panel:#0a1228;--cyan:#27e7ff;--cyan-soft:#a9f8ff;--magenta:#ff2bd6;--violet:#7a4dff;--acid:#d8ff35;--grid:rgba(39,231,255,.13)}
html,body{background:#02030a;color:#e9fbff}
.phone{border:1px solid #2eeaff;background:var(--cyber-bg);box-shadow:0 0 0 2px #0b1834,0 0 35px rgba(39,231,255,.35),0 0 80px rgba(255,43,214,.14)}
.screen{color:#e9fbff;background-color:var(--cyber-bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),radial-gradient(circle at 50% 20%,#162c5e 0,#080d22 45%,#03050f 100%);background-size:28px 28px,28px 28px,100% 100%}
.screen:before{content:"";position:absolute;inset:0;z-index:50;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.018) 4px 5px);mix-blend-mode:screen}

/* Cyber home */
.home-screen{background-color:var(--cyber-bg)}
.sunburst{inset:0;background:radial-gradient(circle at 50% 42%,rgba(39,231,255,.22),transparent 31%),conic-gradient(from 0deg at 50% 42%,transparent 0 8deg,rgba(39,231,255,.05) 8deg 10deg,transparent 10deg 23deg,rgba(255,43,214,.07) 23deg 25deg,transparent 25deg);animation:cyber-radar 18s linear infinite}
.home-screen:after{height:25%;background:linear-gradient(170deg,transparent 20%,rgba(6,15,35,.94) 20.4%),linear-gradient(90deg,transparent 49.7%,rgba(39,231,255,.45) 50%,transparent 50.3%);clip-path:none}
.home-topline{color:var(--cyan-soft);font-family:"Courier New",monospace;text-shadow:0 0 8px var(--cyan)}
.home-topline:before,.home-topline:after{content:"//";color:var(--magenta)}
.home-topline strong{background:#09152c;color:var(--acid);border:1px solid var(--cyan);box-shadow:3px 3px 0 var(--magenta),0 0 12px rgba(39,231,255,.5);clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}
.brand{filter:drop-shadow(0 0 7px rgba(39,231,255,.9));text-shadow:none}
.brand-dopa,.brand-tsume{-webkit-text-stroke:2px #dffcff;font-style:italic}
.brand-dopa{color:var(--magenta);text-shadow:5px 4px 0 #5418a8,0 0 14px var(--magenta)}.brand-tsume{color:var(--cyan);text-shadow:5px 4px 0 #006c9f,0 0 14px var(--cyan)}
.brand small{background:#071023;color:var(--cyan-soft);border:1px solid var(--cyan);box-shadow:inset 0 0 12px rgba(39,231,255,.18);font-family:"Courier New",monospace;clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%)}
.mascot-stage:before,.mascot-stage:after{content:"";position:absolute;width:74%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(39,231,255,.55);animation:cyber-ring 7s linear infinite}.mascot-stage:after{width:82%;border-style:dashed;border-color:rgba(255,43,214,.45);animation-direction:reverse;animation-duration:11s}
.mascot-burst{background:radial-gradient(circle,#faffff 0 55%,#bdf8ff 70%,transparent 71%);box-shadow:0 0 0 2px var(--cyan),0 0 22px var(--cyan),0 0 55px rgba(255,43,214,.45)}
.mascot{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px var(--cyan))}
.impact{border:1px solid var(--cyan);background:#061128;color:#fff;box-shadow:3px 3px 0 var(--magenta),0 0 12px rgba(39,231,255,.55);font-family:"Courier New",monospace;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}
.impact-one{color:var(--cyan)}.impact-two{background:#160827;color:var(--acid);border-color:var(--magenta);box-shadow:3px 3px 0 var(--cyan),0 0 12px rgba(255,43,214,.55)}
.tagline{color:#eaffff;text-shadow:0 0 8px var(--cyan)}.tagline strong{color:var(--acid);-webkit-text-stroke:0;text-shadow:0 0 9px rgba(216,255,53,.8)}
.primary-btn{background:linear-gradient(100deg,#147cff,#c51dcc);border:2px solid var(--cyan-soft);color:#fff;box-shadow:6px 6px 0 #01101b,0 0 18px rgba(39,231,255,.6),inset 0 0 14px rgba(255,255,255,.25);clip-path:polygon(5% 0,95% 0,100% 25%,100% 75%,95% 100%,5% 100%,0 75%,0 25%);text-shadow:0 0 8px #fff}
.micro-copy{color:#7cdbea;font-family:"Courier New",monospace}

/* Cyber play field */
.play-screen{background-color:#040714}
.problem-meta{color:var(--cyan-soft);font-family:"Courier New",monospace;text-shadow:0 0 6px var(--cyan)}
.problem-meta #difficulty{background:#13072a;color:var(--acid);border:1px solid var(--magenta);box-shadow:0 0 10px rgba(255,43,214,.45)}
.board{border:3px solid var(--cyan);background:#0a1830;box-shadow:inset 0 0 20px rgba(39,231,255,.22),0 0 14px rgba(39,231,255,.58),7px 7px 0 #251052}
.cell{border-color:rgba(39,231,255,.36);background:linear-gradient(135deg,rgba(27,65,108,.58),rgba(3,12,28,.88));color:#fff}
.cell:nth-child(odd){background:linear-gradient(135deg,rgba(23,55,96,.62),rgba(4,10,25,.92))}
.cell.selected{background:rgba(255,43,214,.38);box-shadow:inset 0 0 0 3px var(--magenta),inset 0 0 14px var(--magenta)}
.cell.hint{box-shadow:inset 0 0 0 3px var(--acid),inset 0 0 15px rgba(216,255,53,.75)}
.piece{background:linear-gradient(145deg,#e9ffff,#8ceeff);color:#04121f;filter:drop-shadow(1px 2px 0 #0085a8) drop-shadow(0 0 5px var(--cyan));clip-path:polygon(50% 0,94% 17%,87% 100%,13% 100%,6% 17%)}
.piece.gote{background:linear-gradient(145deg,#ffe9fb,#ff8be7);filter:drop-shadow(1px 2px 0 #a80089) drop-shadow(0 0 5px var(--magenta))}
.piece.promoted{color:#b10088}
.piece-stand{border:2px solid var(--cyan);background:linear-gradient(100deg,#07152d,#15103a);box-shadow:4px 4px 0 #281052,0 0 12px rgba(39,231,255,.38);clip-path:polygon(2% 0,100% 0,98% 100%,0 100%)}
.piece-stand-label{border-color:rgba(39,231,255,.38);color:var(--cyan-soft)}.piece-stand-label span{color:var(--magenta)}.hand-empty{color:#67b8c8}
.feedback{color:#fff;text-shadow:0 0 8px var(--cyan)}.feedback.good{color:var(--acid);text-shadow:0 0 10px var(--acid)}.feedback.bad{color:#ff568c;text-shadow:0 0 10px #ff2169}.feedback.skip{color:#84b4c3}
.score-card{border:2px solid var(--cyan);background:linear-gradient(110deg,#07132b,#15113d);color:#fff;box-shadow:5px 5px 0 #350f51,0 0 12px rgba(39,231,255,.42)}
.score-card span{color:var(--cyan)}.score-card strong{color:#fff;text-shadow:3px 3px 0 var(--magenta),0 0 11px var(--cyan)}
.dan-rank{color:#041019;background:linear-gradient(90deg,var(--acid),var(--cyan));border-left-color:var(--magenta);box-shadow:0 0 10px rgba(39,231,255,.55)}
.skip-btn{border:1px solid #50738d;background:#091326;color:#8ab9c7;box-shadow:inset 0 0 8px rgba(39,231,255,.12);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.combo-copy strong{background:#071127;color:#fff;border:2px solid var(--cyan);box-shadow:7px 7px 0 var(--magenta),-5px -5px 0 var(--cyan),0 0 25px var(--cyan);text-shadow:0 0 9px var(--cyan)}
.combo-copy span{background:#19092c;color:var(--acid);border:1px solid var(--magenta);box-shadow:4px 4px 0 var(--cyan),0 0 14px var(--magenta)}

/* Cyber result */
.result-screen{background:radial-gradient(circle at 50% 17%,rgba(42,74,170,.82),transparent 31%),linear-gradient(180deg,#090d25,#03040c);color:#fff}
.result-rays{background:repeating-conic-gradient(from 0deg,rgba(39,231,255,.12) 0 3deg,transparent 3deg 12deg,rgba(255,43,214,.09) 12deg 14deg,transparent 14deg 24deg)}
.result-crown{color:var(--cyan-soft);text-shadow:0 0 7px #fff,0 0 18px var(--cyan),0 0 35px var(--magenta)}
.result-title{color:#fff;-webkit-text-stroke:1px var(--cyan);text-shadow:4px 4px 0 #36126e,0 0 13px var(--cyan)}.result-title span{color:var(--magenta);text-shadow:0 0 8px var(--magenta)}
.result-rank{background:#080c20;color:var(--acid);border:1px solid var(--cyan);box-shadow:5px 5px 0 var(--magenta),0 0 14px var(--cyan);clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%)}
.result-stats{border:2px solid var(--cyan);background:rgba(4,11,28,.9);box-shadow:7px 7px 0 #281052,0 0 18px rgba(39,231,255,.4)}
.result-stats div{border-color:rgba(39,231,255,.3)}.result-stats .result-score-row{background:linear-gradient(90deg,#071633,#1c0d3d)}.result-score-row strong{color:#fff;text-shadow:3px 3px 0 var(--magenta),0 0 11px var(--cyan)}
.result-message{color:var(--cyan-soft);text-shadow:0 0 8px var(--cyan)}
.ad-box{background:#06101f;border-color:#205071;color:#56899b}
@keyframes cyber-radar{to{transform:rotate(360deg)}}@keyframes cyber-ring{to{transform:rotate(360deg)}}

/* Supplied shogi board and piece artwork */
.board{
  position:relative;
  padding:1.1% 1.2%;
  border:0;
  background:#303030 url("sozai/ban.png") center/100% 100% no-repeat;
  box-shadow:0 0 14px rgba(39,231,255,.58),7px 7px 0 #251052;
  transform-origin:center;
}
.board.gote-view{transform:rotate(180deg)}
.board::before,.board::after{content:"";position:absolute;z-index:8;pointer-events:none;opacity:0}
.board::before{
  left:-12%;top:49%;width:124%;height:3px;
  background:linear-gradient(90deg,transparent 0 4%,var(--cyan) 24%,#fff 48%,var(--magenta) 74%,transparent 100%);
  box-shadow:0 0 4px #fff,0 0 10px var(--cyan),0 0 20px rgba(255,43,214,.8);
  transform:translateX(-70%) skewX(-24deg) scaleX(.25);
}
.board::after{
  left:-5%;top:45%;width:24%;height:10%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 62%,var(--cyan) 80%,transparent);
  clip-path:polygon(0 51%,32% 45%,44% 56%,59% 31%,69% 61%,82% 41%,100% 49%,82% 57%,70% 48%,59% 69%,44% 47%,31% 58%);
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 9px var(--cyan));
  transform:translateX(-30%) scaleX(.7);
}
.board.reply-flash::before{animation:reply-energy-line .38s cubic-bezier(.2,.72,.28,1) both}
.board.reply-flash::after{animation:reply-energy-head .38s cubic-bezier(.2,.72,.28,1) both}
@keyframes reply-energy-line{
  0%{opacity:0;transform:translateX(-70%) skewX(-24deg) scaleX(.25)}
  18%{opacity:1}
  58%{opacity:.95;transform:translateX(0) skewX(-24deg) scaleX(1)}
  100%{opacity:0;transform:translateX(35%) skewX(-24deg) scaleX(.72)}
}
@keyframes reply-energy-head{
  0%{opacity:0;transform:translateX(-30%) scaleX(.7)}
  15%{opacity:1}
  78%{opacity:1;transform:translateX(390%) scaleX(1)}
  100%{opacity:0;transform:translateX(470%) scaleX(.4)}
}
.cell,.cell:nth-child(odd){border:0;background:transparent}
.cell.selected{background:rgba(255,43,214,.38)}
.cell.reply-from{background:rgba(255,255,255,.16);animation:reply-square .7s ease-out}
.cell.reply-to{background:rgba(216,255,53,.42);box-shadow:inset 0 0 0 3px var(--acid);animation:reply-square .7s ease-out}
@keyframes reply-square{0%{filter:brightness(2)}100%{filter:brightness(1)}}
.piece,.piece.gote{
  width:96%;height:96%;object-fit:contain;
  background:none;clip-path:none;color:inherit;
  filter:drop-shadow(0 -.7px 0 rgba(255,255,255,.92)) drop-shadow(.7px 0 0 rgba(255,255,255,.92)) drop-shadow(0 .7px 0 rgba(255,255,255,.92)) drop-shadow(-.7px 0 0 rgba(255,255,255,.92)) drop-shadow(1px 2px 1px rgba(0,0,0,.72));
  transform:translateY(0);
  user-select:none;pointer-events:none;
}
.piece.rotated{transform:rotate(180deg)}
.hand-pieces .piece,.hand-pieces .piece.gote{width:100%;height:100%;object-fit:contain}

/* Make the defending king immediately identifiable in every puzzle. */
.cell.enemy-king,.cell.enemy-king:nth-child(odd){
  background:radial-gradient(circle,rgba(255,238,72,.86) 0 34%,rgba(255,79,40,.72) 58%,rgba(122,10,39,.88) 100%);
  box-shadow:inset 0 0 0 3px #fff06a,inset 0 0 13px #ff3d57,0 0 9px rgba(255,72,45,.92);
}
.cell.enemy-king .piece{filter:drop-shadow(0 -.7px 0 #fff) drop-shadow(.7px 0 0 #fff) drop-shadow(0 .7px 0 #fff) drop-shadow(-.7px 0 0 #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #ffec52) drop-shadow(1px 2px 1px rgba(0,0,0,.75))}

/* Keep the complete result and sharing controls above the banner ad. */
.result-screen{padding:3% 8% 2%}
.result-screen .result-stats div{padding:1.25% 4%}
.result-screen .result-stats strong{font-size:clamp(20px,4vw,29px)}
.result-screen .result-stats .result-score-row strong{font-size:clamp(34px,7vw,52px)}
.result-screen .result-message{min-height:7%;margin:2% 0 1%;padding:1%}
.result-screen .share-status{margin:0 0 1%}
.result-screen .result-actions{gap:5px}
.result-screen .result-actions .primary-btn{padding:1.8% 4%}

/* Fit the play UI without flex-shrinking the timer, and maximize the board. */
.play-screen{padding:2% 4% 1.5%}
.play-screen .timer-wrap{flex:0 0 58px;min-height:58px;margin-bottom:1%;padding:1.2% 3% 3.2%}
.play-screen .timer{font-size:clamp(34px,7vw,50px);line-height:1}
.play-screen .timer-readout{align-items:center;min-height:48px;overflow:visible}
.play-screen .timer-readout small{padding-bottom:0}
.play-screen .problem-meta{flex:0 0 auto;padding:0 1% 1%}
.play-screen .problem-meta{justify-content:flex-end}
.play-screen #problemNo{display:none}
.play-screen .board-wrap{width:100%;margin:0 auto;flex:0 0 auto}
.play-screen .feedback{position:absolute;z-index:12;left:4%;right:4%;bottom:66px;height:24px;pointer-events:none}
.play-screen .play-bottom{height:65px;flex:0 0 65px;padding-top:1%}
.play-screen .score-card{height:62px;border-width:2px;padding:1% 3%;box-shadow:3px 3px 0 #350f51}
.play-screen .score-card strong{font-size:clamp(30px,7vw,48px);line-height:.78}
.play-screen .score-card span{font-size:clamp(8px,1.8vw,12px)}
.play-screen .dan-rank{margin-top:0;padding:.5% 4%;font-size:clamp(10px,2.2vw,15px)}
.play-screen .skip-btn{padding:2% 3%;font-size:clamp(11px,2.4vw,16px)}
.play-control-buttons{width:92px;height:60px;flex:0 0 92px;display:grid;grid-template-rows:1fr 1fr;gap:4px}
.play-control-buttons .skip-btn,.play-control-buttons .finish-btn{min-height:0;padding:0 8px;font-size:clamp(10px,2.2vw,14px);line-height:1;white-space:nowrap}
.finish-btn{border:1px solid #ff568c;background:#23091a;color:#ffd9e6;font-weight:900;box-shadow:inset 0 0 8px rgba(255,33,105,.24)}
.promotion-choice{
  position:absolute;z-index:35;left:50%;top:47%;transform:translate(-50%,-50%);
  width:min(310px,88%);min-height:48px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px;
  padding:7px 9px;border:2px solid var(--cyan);background:rgba(4,10,28,.97);color:#eaffff;
  box-shadow:0 0 0 3px rgba(4,10,28,.85),0 0 18px var(--cyan),5px 5px 0 #281052
}
.promotion-choice span{font-size:clamp(12px,2.7vw,16px);font-weight:900;white-space:nowrap}
.promotion-choice button{min-width:64px;padding:7px 9px;border:1px solid #67859c;background:#101b31;color:#dffaff;font-size:clamp(11px,2.4vw,14px);font-weight:900}
.promotion-choice .promote-yes{border-color:var(--magenta);background:#2b0a35;color:#fff;box-shadow:0 0 8px rgba(255,43,214,.55)}