/* DUBBELSPEL v43 — mobile-first refinement. Loaded after the visual themes. */
.suspicion-explainer{
  border:2px solid #d7ad62;background:rgba(119,80,34,.25);
  border-radius:12px;padding:14px 15px;margin:14px 0;color:#f9e4be;line-height:1.5
}
.suspicion-explainer strong{display:block;font-size:15px;color:#ffdc89}
.suspicion-explainer p{font-size:14px;margin:9px 0}
.suspicion-explainer span{display:block;font-size:12px;font-weight:700;color:#ffdfa8;line-height:1.6}
.mobile-phase-hint{border:1px solid #d7ad62;background:rgba(111,74,29,.27);color:#ffe4aa;border-radius:10px;padding:11px 13px;font-weight:700;font-size:12px;line-height:1.45;margin:10px 0}
body.day .suspicion-explainer,body.day .mobile-phase-hint{color:#fff3d4}
@media(max-width:760px){
  html{font-size:16px;-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  #app{min-width:0}
  .shell{width:100%;max-width:100%;padding:12px 12px calc(66px + env(safe-area-inset-bottom,0px));overflow-wrap:anywhere}
  .layout{display:flex;flex-direction:column;gap:14px;margin-top:12px;min-width:0}
  .layout>main,.layout>.sidebar{width:100%;min-width:0}
  .layout>main{display:flex;flex-direction:column}
  .layout>.sidebar{border-left:0;border-top:1px solid var(--line);padding:15px 0 0;margin:0}
  .top{gap:8px;padding-bottom:12px}
  .top .eyebrow{font-size:9px;letter-spacing:.09em}
  .brand{font-size:clamp(22px,7vw,32px)}
  .hero{padding:22px 0 12px}
  h1{font-size:clamp(32px,9vw,52px);line-height:1.1;margin:15px 0 10px}
  h2{font-size:clamp(23px,6vw,34px)}
  h3{font-size:clamp(21px,5.7vw,29px)}
  .lead{font-size:15px;line-height:1.48}
  .panel{padding:15px}
  .phase-guidance,.night-silence,.radar-notice,.traitor-allies{margin:9px 0;padding:11px 12px}
  .phase-guidance p{font-size:13px}
  .board{width:min(100%,480px);max-width:480px;aspect-ratio:1/1;margin:12px auto 17px;flex:none;overflow:visible}
  .board .table{inset:25% 24%;gap:3px;box-shadow:inset 0 0 0 5px var(--surface),inset 0 0 0 6px var(--line)}
  .board .table .eyebrow{font-size:clamp(8px,2.2vw,11px);letter-spacing:.08em}
  .board .table strong{font-size:clamp(13px,3.8vw,22px)!important;line-height:1.15}
  .board .table .timer{font-size:clamp(24px,7vw,39px)}
  .board .seat{width:clamp(34px,10vw,48px);height:clamp(34px,10vw,48px);padding:2px;border-radius:50%;font-size:clamp(7px,2vw,10px);line-height:1.05;touch-action:manipulation}
  .board .seat b{font-size:clamp(10px,3vw,14px)}
  .board .seat span:not(.count){display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(7px,2vw,10px)}
  .board .seat.secret-target{transform:translate(-50%,-50%) scale(1.04)!important}
  .board .seat.secret-target::after{font-size:7px;top:94%;padding-top:2px}
  .pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .pick button{width:100%;min-width:0;min-height:48px;padding:12px 9px;overflow-wrap:anywhere;touch-action:manipulation}
  button.primary,button.outline,.buttons button,.doctor-pass{min-height:46px}
  .field input,.field select,input,select,textarea{font-size:16px}
  .chatlog{max-height:min(36dvh,300px);overflow-y:auto;overscroll-behavior:contain}
  .hacked-conversations{max-width:100%;overflow-wrap:anywhere}
  .chat-input,.chat-compose{max-width:100%}
  .chat-input input,.chat-compose input{min-width:0;flex:1}
  .vote-alert{padding:22px 14px;margin:auto 0}
  .vote-alert h1{font-size:clamp(33px,10vw,60px)}
  .vote-alert-icon{font-size:42px}
  .night-warning{margin:20px auto;padding:12px}
  .night-warning h1{font-size:clamp(30px,9vw,50px)}
  .night-warning-rule{padding:14px;margin:15px 0}
  .special-screen .hero{padding:18px 0}
  .special-screen .panel{margin:12px 0}
  .home-intro{padding-top:18px}
  .home-art{max-height:210px}
  .home-mask-art{height:210px}
  .home-mask-image{max-height:205px}
  .home-actions{margin-top:12px}
  .home-action{padding:18px 15px}
  .role-distribution{gap:5px}
  .role-tile{padding:11px 3px}
  .role-label{font-size:10px}
  .code{font-size:clamp(35px,11vw,60px);letter-spacing:.08em}
  .rules-fab{bottom:calc(8px + env(safe-area-inset-bottom,0px));right:9px;z-index:100}
}
@media(max-width:390px){
  .shell{padding-left:9px;padding-right:9px}
  .board{width:100%;margin:9px auto 15px}
  .board .seat{width:clamp(31px,9.3vw,37px);height:clamp(31px,9.3vw,37px)}
  .board .seat span:not(.count){font-size:7px}
  .board .seat b{font-size:10px}
  .board .table{inset:26% 25%}
  .board .table strong{font-size:clamp(12px,3.4vw,17px)!important}
  .board .table .timer{font-size:clamp(22px,6.5vw,31px)}
  .pick{gap:7px}
  .pick button{font-size:13px}
}
@media(max-width:340px){
  .board .seat{width:30px;height:30px;font-size:7px}
  .board .seat b{font-size:9px}
  .board .seat span:not(.count){font-size:6.5px}
  .board .table .eyebrow{font-size:7px}
}
@media(prefers-reduced-motion:reduce){
  .vote-alert,.vote-alert-icon{animation:none!important}
}